<template>
  <div class="character-setting">
    <div class="character-header">
      <h2>人物设定</h2>
      <el-button type="primary" @click="showCreateCharacterDialog">新建角色</el-button>
    </div>
    
    <div class="character-list">
      <el-card v-for="character in characters" :key="character.id" class="character-card">
        <template #header>
          <div class="character-card-header">
            <span>{{ character.name }}</span>
            <el-dropdown>
              <el-icon><More /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="editCharacter(character)">编辑</el-dropdown-item>
                  <el-dropdown-item @click="deleteCharacter(character)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <div class="character-info">
          <div class="basic-info">
            <p><strong>年龄：</strong>{{ character.age }}</p>
            <p><strong>职业：</strong>{{ character.occupation }}</p>
            <p><strong>性格：</strong>{{ character.personality }}</p>
          </div>
          <div class="background-story">
            <h4>背景故事</h4>
            <p>{{ character.background }}</p>
          </div>
          <div class="relationships">
            <h4>人物关系</h4>
            <ul>
              <li v-for="(relation, index) in character.relationships" :key="index">
                {{ relation }}
              </li>
            </ul>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 新建角色对话框 -->
    <el-dialog
      v-model="createCharacterDialogVisible"
      title="新建角色"
      width="600px"
    >
      <el-form :model="newCharacter" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="newCharacter.name" placeholder="请输入角色姓名" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="newCharacter.age" :min="0" :max="150" />
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="newCharacter.occupation" placeholder="请输入角色职业" />
        </el-form-item>
        <el-form-item label="性格">
          <el-input v-model="newCharacter.personality" placeholder="请输入角色性格特点" />
        </el-form-item>
        <el-form-item label="背景故事">
          <el-input
            v-model="newCharacter.background"
            type="textarea"
            :rows="4"
            placeholder="请输入角色背景故事"
          />
        </el-form-item>
        <el-form-item label="人物关系">
          <el-input
            v-model="newCharacter.relationships"
            type="textarea"
            :rows="3"
            placeholder="请输入与其他角色的关系"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createCharacterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createCharacter">创建</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { More } from '@element-plus/icons-vue'

const createCharacterDialogVisible = ref(false)
const newCharacter = ref({
  name: '',
  age: 25,
  occupation: '',
  personality: '',
  background: '',
  relationships: ''
})

const characters = ref([
  {
    id: 1,
    name: '张三',
    age: 30,
    occupation: '公司经理',
    personality: '果断、理性、有领导力',
    background: '从小在单亲家庭长大，靠自己的努力打拼...',
    relationships: ['李四：下属', '王五：竞争对手']
  }
])

const showCreateCharacterDialog = () => {
  createCharacterDialogVisible.value = true
  newCharacter.value = {
    name: '',
    age: 25,
    occupation: '',
    personality: '',
    background: '',
    relationships: ''
  }
}

const createCharacter = () => {
  if (!newCharacter.value.name) {
    ElMessage.warning('请输入角色姓名')
    return
  }
  
  characters.value.push({
    id: characters.value.length + 1,
    ...newCharacter.value,
    relationships: newCharacter.value.relationships.split('\n').filter(r => r.trim())
  })
  
  createCharacterDialogVisible.value = false
  ElMessage.success('角色创建成功')
}

const editCharacter = (character) => {
  // TODO: 实现编辑功能
  ElMessage.info('编辑功能开发中')
}

const deleteCharacter = (character) => {
  ElMessageBox.confirm('确定要删除这个角色吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = characters.value.findIndex(c => c.id === character.id)
    if (index > -1) {
      characters.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}
</script>

<style scoped>
.character-setting {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.character-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.character-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  overflow-y: auto;
}

.character-card {
  height: fit-content;
}

.character-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.character-info {
  .basic-info {
    margin-bottom: 16px;
  }
  
  .background-story {
    margin-bottom: 16px;
    
    h4 {
      margin: 0 0 8px 0;
    }
  }
  
  .relationships {
    h4 {
      margin: 0 0 8px 0;
    }
    
    ul {
      margin: 0;
      padding-left: 20px;
    }
  }
}
</style> 